<template>
  <div>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>当天挂号</span>
      </div>
      <el-table :data="registerTableData" style="width: 100%" stripe>
        <el-table-column type="index" label="序号" />
        <el-table-column prop="register_id" label="挂号单号" width="180" />
        <el-table-column prop="self_id" label="患者ID" width="180" />
        <el-table-column prop="self_name" label="患者姓名" />
        <el-table-column prop="doctor_name" label="医生姓名" />
        <el-table-column prop="register_date" label="挂号日期" />
        <el-table-column prop="register_time" label="挂号时段" />
        <el-table-column prop="register_status" label="就诊状态">
          <template slot-scope="scope">
            <el-tag
              v-if="!scope.row.register_status"
              type="warning"
              effect="dark"
              size="medium"
            >等待就诊</el-tag>
            <el-tag
              v-if="scope.row.register_status"
              type="success"
              effect="dark"
              size="medium"
            >完成就诊</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.register_status === 0"
              type="danger"
              round
              @click="openDeal(scope.row)"
            >
              处理
            </el-button>
            <el-button
              v-if="scope.row.register_status === 1"
              type="danger"
              round
              @click="openDeal2(scope.row)"
            >
              追诊
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 处理病情的抽屉 -->
    <el-drawer title="问诊" :visible.sync="drawer" size="60%">
      <el-card>
        <el-form :inline="true" :model="dealForm" class="demo-form-inline">
          <el-form-item label="挂号单号" label-width="150px">
            <el-input v-model="dealForm.register_id" disabled />
          </el-form-item>
          <el-form-item label="医生姓名" label-width="150px">
            <el-input v-model="dealForm.doctor_name" disabled />
          </el-form-item>
          <el-form-item label="   " label-width="150px">
            <el-button
              type="warning"
              @click="dialogVisible = true"
            >病因编写</el-button>
          </el-form-item>
          <el-form-item label="患者姓名" label-width="150px">
            <el-input v-model="dealForm.self_name" disabled />
          </el-form-item>
          <el-form-item label="患者ID" label-width="150px">
            <el-input v-model="dealForm.self_id" disabled />
          </el-form-item>
          <el-form-item label="   " label-width="150px">
            <el-button type="success" @click="onSubmit">提交</el-button>
          </el-form-item>
          <!-- <el-input
            placeholder="请输入名称查询药品"
            v-model="selectMedicine"
            class="input-with-select"
            style="width: 45%"
          >
            <el-button slot="append" icon="el-icon-search"></el-button
          ></el-input>
          <el-input
            placeholder="请输入名称查询项目"
            v-model="selectMedicine"
            class="input-with-select"
            style="width: 45%; margin-left: 65px"
          >
            <el-button slot="append" icon="el-icon-search"></el-button
          ></el-input> -->
          <div style="display: flex">
            <el-table
              :data="medicineTableData"
              height="250"
              border
              style="width: 45%"
            >
              <el-table-column prop="medicineName" label="药品名称" width="140" />
              <el-table-column prop="unitPrice" label="药品单价" width="80" />
              <el-table-column
                prop="unit"
                label="单位"
                width="80"
              />
              <el-table-column
                prop="unit"
                label="操作"
              ><template
                slot-scope="scope"
              ><el-button
                type="success"
                @click="add(scope.row)"
              >添加</el-button></template></el-table-column>
            </el-table>
            <el-table
              :data="projectTableData"
              height="250"
              border
              style="width: 45%; margin-left: 20px"
            >
              <el-table-column
                prop="medicineName"
                label="检查项目名称"
                width="140"
              />
              <el-table-column prop="unitPrice" label="项目单价" width="80" />
              <el-table-column prop="unit" label="单位" width="80" />
              <el-table-column prop="unit" label="操作">
                <template
                  slot-scope="scope"
                ><el-button
                  type="success"
                  @click="add(scope.row)"
                >添加</el-button></template>
              </el-table-column>
            </el-table>
          </div>
          <div style="display: flex">
            <el-table
              :data="selectedTableData"
              height="250"
              border
              style="width: 45%"
            >
              <el-table-column
                prop="medicineName"
                label="药品/检查项目名称"
                width="140"
              />
              <el-table-column prop="unitPrice" label="药品单价" width="80" />
              <el-table-column
                prop="unit"
                label="单位"
                width="80"
              />
              <el-table-column prop="count" label="数量">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.count"
                    size="mini"
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="小计"
              ><template slot-scope="scope">{{
                scope.row.count * scope.row.unitPrice
              }}</template></el-table-column>
              <!-- <el-table-column prop="total" label="小计" width="80"></el-table-column> -->
            </el-table>
          </div>
        </el-form>
      </el-card>
    </el-drawer>

    <el-drawer title="问诊" :visible.sync="drawer2" size="60%">
      <el-card>
        <el-form :inline="true" :model="dealForm" class="demo-form-inline">
          <el-form-item label="挂号单号" label-width="150px">
            <el-input v-model="dealForm.register_id" disabled />
          </el-form-item>
          <el-form-item label="医生姓名" label-width="150px">
            <el-input v-model="dealForm.doctor_name" disabled />
          </el-form-item>
          <el-form-item label="   " label-width="150px">
            <el-button
              type="warning"
              @click="resultVisible = true"
            >检查结果编写</el-button>
          </el-form-item>
          <el-form-item label="患者姓名" label-width="150px">
            <el-input v-model="dealForm.self_name" disabled />
          </el-form-item>
          <el-form-item label="患者ID" label-width="150px">
            <el-input v-model="dealForm.self_id" disabled />
          </el-form-item>
          <el-form-item label="   " label-width="150px">
            <el-button type="success" @click="onSubmit2">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-drawer>

    <!-- 病因编写的弹窗 -->
    <el-dialog title="病因编写" :visible.sync="dialogVisible" width="30%">
      <el-input
        v-model="dealForm.symptom"
        type="textarea"
        placeholder="请输入内容"
        rows="10"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 检查结果编写的弹窗 -->
    <el-dialog title="检查结果" :visible.sync="resultVisible" width="30%">
      <el-input
        v-model="dealForm.check_result"
        type="textarea"
        placeholder="请输入内容"
        rows="10"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="resultVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="resultVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { getRegisterInfo } from '@/api/registerInfo'
// import { getMedicineInfo, getProjectInfo } from '@/api/medicineInfo'
// import { doctorSetRegister } from '@/api/doctor'
// import { newPayInfo } from '@/api/payInfo'
export default {
  name: 'Doctor',
  components: {},
  data() {
    return {
      drawer: false,
      drawer2: false,
      dialogVisible: false,
      resultVisible: false,
      selectMedicine: '',
      selectProject: '',
      registerTableData: [],
      medicineTableData: [],
      projectTableData: [],
      selectedTableData: [],
      dealForm: {
        register_id: '',
        doctor_name: '',
        self_name: '',
        self_id: '',
        symptom: '',
        check_result: '',
        medicineList: [],
        checkProjectList: []
      },
      emptydealForm: {
        register_id: '',
        doctor_name: '',
        self_name: '',
        self_id: '',
        symptom: '',
        check_result: '',
        medicineList: [],
        checkProjectList: []
      }
    }
  },
  created() {
    // this.getRegisterInfo();
    // this.getMedicineInfo();
    // this.getProjectInfo();
  },
  methods: {
  //   async getRegisterInfo() {
  //     const {
  //       data: { message }
  //     } = await getRegisterInfo()
  //     // console.log(message)
  //     const today = new Date().toISOString()
  //     // console.log(today)
  //     this.registerTableData = message.filter(
  //       (item) => item.register_date.slice(0, 10) === today.slice(0, 10)
  //     )
  //     this.registerTableData.forEach((item) => {
  //       item.register_date = item.register_date.slice(0, 10)
  //     })
  //   },
  //   async getMedicineInfo() {
  //     const {
  //       data: { message }
  //     } = await getMedicineInfo()
  //     this.medicineTableData = message
  //   },
  //   async getProjectInfo() {
  //     const {
  //       data: { message }
  //     } = await getProjectInfo()
  //     this.projectTableData = message
  //   },
  //   openDeal(row) {
  //     this.drawer = true
  //     this.dealForm.register_id = row.register_id
  //     this.dealForm.doctor_name = row.doctor_name
  //     this.dealForm.doctor_id = row.doctor_id
  //     this.dealForm.self_name = row.self_name
  //     this.dealForm.self_id = row.self_id
  //     this.dealForm.register_date = row.register_date
  //   },
  //   openDeal2(row) {
  //     this.drawer2 = true
  //     this.dealForm.register_id = row.register_id
  //     this.dealForm.doctor_name = row.doctor_name
  //     this.dealForm.doctor_id = row.doctor_id
  //     this.dealForm.self_name = row.self_name
  //     this.dealForm.self_id = row.self_id
  //     this.dealForm.register_date = row.register_date
  //   },
  //   add(row) {
  //     // console.log(row);
  //     const findIndex = this.selectedTableData.findIndex(
  //       (item) => item.medicineName === row.medicineName
  //     )
  //     if (findIndex !== -1) {
  //       this.selectedTableData[findIndex].count++
  //       this.selectedTableData[findIndex].total =
  //         this.selectedTableData[findIndex].count *
  //         this.selectedTableData[findIndex].unitPrice
  //       // console.log(this.selectedTableData[findIndex])
  //     } else {
  //       this.$set(row, 'count', 1)
  //       this.$set(row, 'total', row.unitPrice)
  //       this.selectedTableData.push(row)
  //     }
  //   },
  //   async onSubmit(register_id) {
  //     // console.log(register_id);
  //     // console.log(this.selectedTableData);
  //     this.selectedTableData.forEach((item) => {
  //       if (item.kind === '药品') {
  //         this.dealForm.medicineList.push(item)
  //       } else {
  //         this.dealForm.checkProjectList.push(item)
  //       }
  //     })
  //     // console.log(this.dealForm)
  //     await doctorSetRegister(this.dealForm)
  //     await newPayInfo(this.dealForm)
  //     // this.dealForm = this.emptydealForm
  //     this.drawer = false
  //     this.getRegisterInfo()
  //   },
  //   async onSubmit2(register_id) {
  //     await doctorSetRegister(this.dealForm)
  //     // this.dealForm = this.emptydealForm
  //     this.drawer2 = false
  //     this.getRegisterInfo()
  //   }
  }
}
</script>
